<template>
 <div>
   <div style="margin-top: 50px">
     <el-upload
         action="http://localhost:8082/book-manager/file/fileUpload"
         list-type="picture-card"
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
         :file-list="imgList"
         :multiple="true"
         :on-change="imgListChange">
       <i class="el-icon-plus"></i>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
   </div>
   <div style="padding-top: 150px">
     <el-button type="primary" @click="addImg">添加添加</el-button>
   </div>
 </div>
</template>

<script>
import qs from "qs";
export default {
  name: "AddSlideShow",
  data(){
    return{
      bookimg: [],
      imgList:'',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods:{
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgListChange(file, imgList) {
      this.imgList = imgList;
    },
    handleRemove(file, imgList) {
      console.log(file, imgList);
    },
    addImg(){
      var mv = this
      console.log(this.imgList)
      var index = 0
      this.imgList.forEach(e=>{
        mv.bookimg[index++] = e.response
      })
      var data =  {
        id: '',
        bookimg: this.bookimg
      }
      console.log(this.bookimg)
      axios({
        method:'post',
        url:'http://localhost:8082/book-manager/slideshow/add',
        data:qs.stringify(data)
      }).then(function (resp){
        console.log(resp.data)
        if (resp.data.flag=='success'){
          mv.$message(resp.data().message)
          mv.$router.push('/addSlideShowManager')
        }else{
          mv.$message(resp.data().message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
